<template>
  <div class="goverRight">
    <dv-border-box-1 class="right-top">
      <dv-decoration-11
        style="width: 150px; height: 50px; margin-top: 10px; padding-left: 10px"
        >年度累计办件量</dv-decoration-11
      >
      <ul class="right-top-sum">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
      <div class="text">
        <div class="inner">
          <span class="text-num">1753912</span>
          <span>累计取号总量</span>
        </div>
        <div class="inner">
          <span class="text-num">6542</span>
          <span>累计办件总量</span>
        </div>
        <div class="inner">
          <span class="text-num">329</span>
          <span>累计满意总量</span>
        </div>
      </div>
    </dv-border-box-1>
    <dv-border-box-1 class="right-top">
      <dv-decoration-11
        style="width: 150px; height: 50px; margin-top: 10px; padding-left: 10px"
        >本月办件总量</dv-decoration-11
      >
      <ul class="right-top-sum">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
      <div class="text">
        <div class="inner">
          <span class="text-num">1753912</span>
          <span>累计取号总量</span>
        </div>
        <div class="inner">
          <span class="text-num">6542</span>
          <span>累计办件总量</span>
        </div>
        <div class="inner">
          <span class="text-num">329</span>
          <span>累计满意总量</span>
        </div>
      </div>
    </dv-border-box-1>
    <div class="right-bottom">
      <dv-decoration-11 style="width: 150px; height: 50px"
        >累计办事满意度</dv-decoration-11
      >
      <div class="echart-pie">
        <Echart :options="option" height="400px" style="left:-45px"></Echart>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "@/common/echart/index.vue";
export default {
  name: "goverRight",
  components: { Echart },
  data() {
    return {
      option: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "70%"],
            // adjust the start and end angle
            startAngle: 225,
            endAngle: 320,
            data: [
              { value: 1000, name: "非常满意" },
              { value: 735, name: "满意" },
              { value: 580, name: "基本满意" },
              { value: 484, name: "不满意" },
              { value: 300, name: "非常不满意" },
            ],
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.goverRight {
  padding-left: 30px;
  flex: 25%;
  display: flex;
  padding-top: 10px;
  flex-direction: column;
  overflow: hidden;
  padding-top: 10px;
  .right-top {
    flex: 25%;
  }
  .right-mid {
    flex: 25%;
  }
  .right-bottom {
    flex: 50%;
    margin-top: 20px;
  }
}
.right-top-sum {
  display: flex;
  align-items: center;
  margin: 10px auto;
  border: 2px solid #004681;
  padding: 5px;
  justify-content: space-around;
  width: 70%;
  li {
    height: 50px;
    width: 25px;
    font-size: 28px;
    margin-left: 5px;
    line-height: 50px;
    text-align: center;
    background-color: #16366c;
  }
}
.text {
  display: flex;
  width: 80%;
  margin: 20px auto;
  justify-content: space-between;
  .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    .text-num {
      margin-bottom: 5px;
      color: #d7c010;
      font-size: 23px;
    }
  }
}
.echart-pie {
  width: 500px;
  margin: 0 auto;
}
</style>
